<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表组</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>

<body>
    <div class="container"><ul class="list-group">
        <li class="list-group-item">第一项</li>
        <li class="list-group-item">第二项</li>
        <li class="list-group-item">第三项</li>
      </ul></div>
    <div class="container"><ul class="list-group">
        <li class="list-group-item active">激活列表项</li>
        <li class="list-group-item">第二项</li>
        <li class="list-group-item">第三项</li>
      </ul></div>
    <div class="container"><ul class="list-group">
        <li class="list-group-item disabled">禁用项</li>
        <li class="list-group-item">第二项</li>
        <li class="list-group-item">第三项</li>
      </ul></div>
    <div class="container"><div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">第一项</a>
        <a href="#" class="list-group-item list-group-item-action">第二项</a>
        <a href="#" class="list-group-item list-group-item-action">第三项</a>
      </div></div>
    <div class="container"><ul class="list-group list-group-flush">
        <li class="list-group-item">第一项</li>
        <li class="list-group-item">第二项</li>
        <li class="list-group-item">第三项</li>
        <li class="list-group-item">第四项</li>
      </ul></div>
    <div class="container"><ul class="list-group list-group-horizontal">
        <li class="list-group-item">第一项</li>
        <li class="list-group-item">第二项</li>
        <li class="list-group-item">第三项</li>
        <li class="list-group-item">第四项</li>
      </ul></div>
    <div class="container"><ul class="list-group">
        <li class="list-group-item list-group-item-success">成功列表项</li>
        <li class="list-group-item list-group-item-secondary">次要列表项</li>
        <li class="list-group-item list-group-item-info">信息列表项</li>
        <li class="list-group-item list-group-item-warning">警告列表项</li>
        <li class="list-group-item list-group-item-danger">危险列表项</li>
        <li class="list-group-item list-group-item-primary">主要列表项</li>
        <li class="list-group-item list-group-item-dark">深灰色列表项</li>
        <li class="list-group-item list-group-item-light">浅色列表项</li>
      </ul></div>
    <div class="container"><div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">激活列表项</a>
        <a href="#" class="list-group-item list-group-item-success">成功列表项</a>
        <a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
        <a href="#" class="list-group-item list-group-item-info">信息列表项</a>
        <a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
        <a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
        <a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
        <a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
        <a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
    </div></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>

    <script src="./js/bootstrap.bundle.min.js"></script>
</body>

</html>